<template>
  <div class="student-body box_bg">
        <h2 class="box_tit">
            <i class="icon icon1"></i>学生管理
            <i class="reti"></i>
        </h2>
        <!-- 内容区域  开始 -->
        <div class="components_con">
            <!-- 查询开始 -->
            <el-form :inline="true" :model="queryFormData" class="demo-form-inline" ref="student" @keyup.enter.native="onSubmit" label-width="80px">
            <div class="components_searchs" @keyup.enter="onSubmit">
                <el-form-item label="学号：" prop="studentNumber">
                    <el-input clearable placeholder="请输入学号" v-model="queryFormData.studentNumber"></el-input>
                </el-form-item>

                <el-form-item label="学生姓名：" prop="name">
                    <el-input clearable placeholder="请输入学生姓名" v-model="queryFormData.name"></el-input>
                </el-form-item>

                <el-form-item label="性别：" prop="sex">
                    <el-select v-model="queryFormData.sex" clearable filterable placeholder="性别">
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                        <el-option label="保密" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-view" size="mini" @click="advancedSearch">高级搜索</el-button>
                </el-form-item>
            </div>

            <div class="components_searchs" ref="searchs" v-if="isShowAdSearch">
                <!-- <el-table-column :show-overflow-tooltip="true" type="index" label="序号" align="center" width='60'></el-table-column> -->

                <el-form-item label="学校：" prop="schoolId">
                    <el-select v-model="queryFormData.schoolId" clearable filterable placeholder="请选择学校" @change="changeSchool">
                        <el-option v-for="school in schoolList" :key="school.id" :label="school.text" :value="school.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="学院：" prop="secondSchoolId">
                    <el-select v-model="queryFormData.secondSchoolId" clearable filterable placeholder="请选择学院" @change="changeSecondSchool">
                      <el-option v-for="secondSchool in secondSchoolList" :label="secondSchool.text" :value="secondSchool.id" :key="secondSchool.id"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="专业：" prop="professionId">
                    <el-select v-model="queryFormData.professionId" clearable filterable placeholder="请选择专业" @change="changeProfession">
                        <el-option v-for="profession in professionList" :key="profession.id" :label="profession.text" :value="profession.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="班级：" prop="classId">
                    <el-select v-model="queryFormData.classId" clearable filterable placeholder="请选择班级">
                        <el-option v-for="schoolClass in classList" :key="schoolClass.id" :label="schoolClass.text" :value="schoolClass.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年级：" prop="gradeId">
                    <el-select v-model="queryFormData.gradeId" clearable filterable placeholder="请选择年级">
                        <el-option v-for="grade in gradeList" :key="grade.id" :label="grade.label" :value="grade.id"></el-option>
                    </el-select>
                </el-form-item>

            </div>
            </el-form>
            <!-- 查询结束 -->
            <!-- components_btns -->
            <div class="components_btns clearfix">
                <div class="fl">
                    <el-button v-has="'student:add'" type="primary" size="mini" icon="el-icon-plus" @click="toAddStudent">添加学生</el-button>

                    <a v-has="'student:export'" href="javascript:void(0)" class="btns" @click="exportStudentInfo">
                        <i class="iconfont icon-leading-iout"></i>
                        导出
                    </a>
                    <a v-has="'student:import'" href="javascript:void(0)" class="btns" @click="importStudentInfo">
                        <i class="iconfont icon-leading-in"></i>
                        导入
                    </a>
                </div>
                <div class="fr">
                    <a v-has="'student:import'" href="javascript:void(0)" @click="downloadTemplate" class="link_txt">
                        下载导入模板
                    </a>
                </div>
            </div>
            <!-- components_btns -->
            <div class="line_feed">
                <vue-table
                      :api-url="studentSupportTable.apiUrl"
                      :fields="studentSupportTable.fields"
                      :appendParams="queryFormData"
                      :content="self"
                      ref="studentSupportTable">
                </vue-table>
            </div>
        </div>
        <student-edit ref="studentEdit"></student-edit>
        <student-add ref="studentAdd"></student-add>
        <student-detail ref="studentDetail"></student-detail>
        <student-import-info ref="studentImport"></student-import-info>
        <student-status-list ref="studentStatusList"></student-status-list>
        <student-card ref="studentCard"></student-card>
  </div>
</template>
<script>
    import {config} from "../../../config.js";
    import student_edit from "./student-edit.vue"
    import student_add from "./student-add.vue"
    import student_detail from "./student-detail.vue"
    import student_import_info from "./student-import-info"
    import student_status_list from "./student-status-list"
    import student_card from "./student-card"
    export default{
        components:{
          "student-edit":student_edit,
          "student-add":student_add,
          "student-detail":student_detail,
          "student-import-info":student_import_info,
          "student-status-list":student_status_list,
          "student-card":student_card
        },
        data(){
            return {
                self:this,
                queryFormData:{
                    studentNumber:"",
                    name:"",
                    sex:"",
                    schoolId:"",
                    secondSchoolId:"",
                    professionId:"",
                    classId:"",
                  gradeId:""
                },
                studentSupportTable: {
                    apiUrl: api.studentPaginationUrl,
                    fields: [{
                            prop: "studentNumber",
                            label: "学号",
                        },
                        {
                            prop: "name",
                            label: "学生姓名",
                            width:100
                        },
                        {
                            prop: "schoolName",
                            label: "学校",
                        },
                        {
                            prop: "secondSchoolName",
                            label: "学院",
                        },
                        {
                            prop: "professionName",
                            label: "专业名称",
                        },
                        {
                            prop: "className",
                            label: "班级名称",
                        },
                        {
                            prop: "statusShow",
                            label: "状态",
                            width:"80"
                        },
                        {
                            prop: "__action",
                            label: "操作",
                            width:350,
                            actions: [

                                {
                                    label: "编辑",
                                    type: "edit",
                                    auth: 'student:update',
                                    func: function(vm, row) {
                                        vm.$refs.studentEdit.showDialog(row.id);
                                    }
                                },{
                                    label: "详情",
                                    type: "edit",
                                    auth: 'student:detail',
                                    func: function(vm, row) {
                                        vm.$refs.studentDetail.showDialog(row.id);
                                    }
                                },
                                {
                                    label: "学籍异动",
                                    type: "edit",
                                    auth: 'student:schoolRollChange',
                                    func: function(vm, row) {
                                        vm.$refs.studentStatusList.showDialog(row);
                                    }
                                },
                                {
                                    label: "学生卡片",
                                    type: "edit",
                                    auth: 'student:card',
                                    func: function(vm, row) {
                                        vm.$refs.studentCard.showDialog(row.id);
                                    }
                                },
                                {
                                    label: "删除",
                                    type: "delete",
                                    auth: 'student:delete',
                                    func: function(vm, row) {
                                       vm.deleteStudent(row.id);
                                    }
                                },
                            ]
                        },
                    ],
                },
                schoolList:[],
                secondSchoolList:[],
                professionList:[],
                classList:[],
                gradeList:[],


                studentInfo:{},
                classData:[],
                politicalStatus:[],
                nations:[],
                statusData:[],
                downloadStudentInfo:config.BASE_URL+api.exportStudentInfo,
                dialogFormVisible: false,
                studentInfoVisible:false,
                isShowAdSearch: false,
                ruleForm: {
                  schoolId:null,
                  secondSchoolId:null,
                  professionId:null,
                  classId:null,
                },
            }
        },
        created(){
          this.getSchoolList();
        },
        methods:{
            reset(){
              if(this.$refs['student']!==undefined){
                    this.$refs['student'].resetFields();
                }
              this.$refs.studentSupportTable.$emit('vuetable:refresh');
            },
            exportStudentInfo(){
              let self = this;
              let href = self.downloadStudentInfo;
              href += "?Authorization="+localStorage.getItem("userToken")+"&"+self.getSearchParams();
              window.location.href = href;
            },
            downloadTemplate(){
              let self = this;
              let href = config.BASE_URL+api.downloadStudentInfoSession;
              href += "?Authorization="+localStorage.getItem("userToken");
              window.location.href = href;
            },
            getSearchParams(){
                let queryFormData = this.queryFormData;
              let ret = ''
              for (let it in queryFormData) {
                if(queryFormData[it]){
                  ret += encodeURIComponent(it) + '=' + encodeURIComponent(queryFormData[it]) + '&'
                }
              }
              return ret;
            },
            deleteStudent(id){
              let vm = this;
                vm.$confirm('是否删除该条记录！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.axios.delete(api.deleteStudentInfo+id)
              .then((response) => {
                    if(response.data.success){
                      vm.$message.success(response.data.msg);
                      vm.$refs.studentSupportTable.$emit('vuetable:current-refresh');
                     }else{
                     vm.$message.error(response.data.msg);
                        }
              });
                },()=>{})
            },

            onSubmit(){
               this.$refs.studentSupportTable.$emit('vuetable:refresh')
            },
            toAddStudent(){
              this.$refs.studentAdd.showDialog();
            },
            importStudentInfo(){
              this.$refs.studentImport.showDialog();
            },

            advancedSearch(){
                this.isShowAdSearch = !this.isShowAdSearch;
            },
            //获取学校
            getSchoolList(){
                let vm = this;
                vm.axios.get(api.getSchoolList).then((response) => {
                    if (response.data.success) {
                        this.schoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //学校监听
            changeSchool(schoolId){
                this.queryFormData.secondSchoolId = null;
                this.queryFormData.professionId=null;
                this.queryFormData.classId=null;
                this.secondSchoolList = [];
                this.professionList = [];
                this.classList = [];
              this.gradeList = [];
                this.getSecondSchoolList(schoolId);
            },
            // 获取二级院系数据
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList,{
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        vm.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //二级学校监听
            changeSecondSchool(secondSchoolId){
                let schoolId = this.queryFormData.schoolId;
                this.queryFormData.professionId=null;
                this.queryFormData.classId=null;
                this.professionList = [];
                this.classList = [];
                this.gradeList = [];
                this.getProfessionlList(schoolId,secondSchoolId);
            },
            //获取筛选后的专业
            getProfessionlList(schoolId,secondSchoolId){
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            changeProfession(professionId){
                let schoolId = this.queryFormData.schoolId;
                let secondSchoolId = this.queryFormData.secondSchool;
                this.queryFormData.classId=null;
                this.classList = [];
              this.gradeList = [];
                this.getClassList(schoolId,secondSchoolId,professionId);
            },
            //获取筛选后的班级
            getClassList(schoolId,secondSchoolId,professionId){
                let vm = this;
                vm.axios.get(api.getClassList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId,
                        professionId:professionId
                    }
                }).then((response) => {
                    if (response.data.success) {
                      vm.classList = response.data.data;
                      vm.gradeList = [];
                      vm.classList.forEach((item)=>{
                        if(item.text){
                          let id = item.text.substr(0,4);
                          let label = id+"级";
                          vm.gradeList.push({id:id,label:label});
                        }
                      });
                      if(vm.gradeList && vm.gradeList.length > 0){
                        let hash = {};
                        //去重
                        vm.gradeList = vm.gradeList.reduce(function (item, next) {
                          hash[next.id] ? '' : hash[next.id] = true && item.push(next);
                          return item
                        }, []);
                      }
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
        }
    }
</script>
<style scoped>
.student-body {
  min-height: 545px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 15px;
}
.student-body .contents span {
  display: inline-block;
  width: 100px;
  margin-top: 10px;
  text-align: right;
}
.student-body .contents .spanInput {
  height: 26px;
  width: 206px;
  line-height: 26px;
  font-size: 12px;
  color: #cdcdcd;
  text-indent: 5px;
  border-radius: 15px;
  border: 1px solid #cdcdcd;
  box-sizing: border-box;
  outline: none;
}

.student-body .contents .sexSpan {
  width: 20px;
  padding-left: 20px;
}
.student-body .contents .sexSpans{
  width: 50px;
}
.student-body .contents .lableInput {
  position: absolute;
  top: 12px;
  left: 105px;
}
.student-body .contents
.student-body .reti {
  width: 94px;
}
.student-body .inputs {
  width: 100%;
  height: 40px;
  padding-top: 20px;
}
.student-body .inputs > span {
  font-size: 12px;
  color: #333;
  padding-left: 1px;
}

.box_tit {
  border-bottom: 1px solid #e6e8ec;
  position: relative;
  padding: 4px 0 10px 30px;
  margin-top: 0;
  font-weight: bold;
  line-height: 16px;
}
.student-body input[type=text], .student-body input[type=password],.student-body select{
  width: 100%;
}
.el-dialog__wrapper .el-select{
  width: 100%;
}
</style>

